@ibiz-template-plugin/ibiz-file-previewer 0.0.4 → 0.0.5

package/README.md

@@ -1,37 +1,109 @@
-# ibiz-file-previewer
+# 文件预览
 
-#### 介绍
-ibiz文件预览器
+## 项目初始化
 
-#### 软件架构
-软件架构说明
+1. 使用 Vite 创建 Vue 3 + TypeScript 项目
+2. 安装必要依赖：sass（SCSS 支持）、vue-tsc（TypeScript 类型检查）
+3. 配置项目结构，创建组件目录和样式目录
 
+## 预览壳组件
 
-#### 安装教程
+1. 创建 `file-preview-shell.vue` 组件
+2. 创建 `file-preview-controller.ts` 控制器模块
+3. 实现参数处理逻辑：
+   - 接收 name、id、url 参数
+   - 处理 id 和 url 的二选一逻辑
+   - 处理 name 参数的获取逻辑
+   - 实现 url 转 id 的下载和上传逻辑
+4. 实现文件信息展示：
+   - 解析文件名
+   - 解析引擎信息
+5. 实现下载功能模块：
+   - 下载源文件
+   - 复制文本内容
+   - 导出为 PDF（非 PDF 文件）
+   - 导出为 MD（非 MD 文件）
+6. 实现文件类型处理：
+   - 基于文件后缀解析文件类型
+   - 支持 html、md、txt、json、pdf 等类型
+   - 动态分发至对应预览组件
+7. 逻辑与 UI 分离：
+   - 预览壳组件负责界面绘制
+   - 控制器模块实现功能逻辑
 
-1.  xxxx
-2.  xxxx
-3.  xxxx
+### 参数输入
 
-#### 使用说明
+| 参数名称              | 类型                                                         | 说明                                                         | 默认值 |
+| --------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ------ |
+| theme                 | `'light' | 'dark'`                                           | 主题                                                         | 'dark' |
+| selector              | string                                                       | 预览组件的挂载点（必填）                                     | ---    |
+| getContent            | `(id: string,type: string,cat: string): Promise<string | object | undefined>` | 获取预览文件的内容，参数依次为：文件标识，文件类型，存储位置名称 | ---    |
+| getImgContent         | `(id: string, type: FileType, cat: string) => Promise<string>`   | 获取预览图片内容，参数依次为：文件标识，文件类型，存储目录        | ---    |
+| upLoadFileToOss       | `(url: string): Promise<{ id: string; name: string; cat: string } | undefined>` | 上传文件至oss，参数为上传路径                                | ---    |
+| downLoadFile          | `(id: string, name: string, cat: string): Promise<void>`     | 下载文件，参数依次为：文件标识，文件名称，存储位置名称       | ---    |
+| actionSuccessCallBack | `(type: string): Promise<void>`                              | 文件操作成功回调，参数为文件类型                             | ---    |
 
-1.  xxxx
-2.  xxxx
-3.  xxxx
+## 预览组件
 
-#### 参与贡献
+1. 实现组件输入参数处理：
 
-1.  Fork 本仓库
-2.  新建 Feat_xxx 分支
-3.  提交代码
-4.  新建 Pull Request
+   - 接收预览组件控制器对象
 
+2. 实现交互控制：
 
-#### 特技
+   - 根据不同的文件引擎类型实现以下功能：
+
+     MD引擎类型：预览、查看大纲、下载源文件、复制文本内容
+
+     HTML引擎类型：预览、下载源文件、复制文本内容
+
+     TXT引擎类型：预览、下载源文件、复制文本内容
+
+     PDF引擎类型：预览、缩略图、顺/逆时针旋转、上/下一页、引擎模式切换、显示模式切换、缩小/放大、重置、下载源文件
+
+     图片引擎类型：预览、顺/逆时针旋转、图片拖拽、显示模式切换、缩小/放大、重置、下载源文件、复制文本内容
+
+3. 逻辑与 UI 分离：
+
+   - 预览组件负责界面绘制
+   - 控制器模块实现功能逻辑
+
+## 样式实现
+
+1. 使用 SCSS 实现主题和响应式样式，支持暗色和亮色两套主题
+2. 确保 HTML 结构语义化和可访问性
+
+## 技术实现规范
+
+- 使用 TypeScript 实现类型安全的组件开发
+- 采用 Vue 3 Composition API 进行逻辑组织
+- 使用 SCSS 实现响应式样式及组件主题
+- 确保 HTML 结构语义化且符合可访问性标准
+
+## 文件预览支持
+
+| 文件扩展名 | 支持情况 |
+| ---------- | -------- |
+| jpg        | 已支持   |
+| png        | 已支持   |
+| gif        | 已支持   |
+| bmp        | 已支持   |
+| jpeg       | 已支持   |
+| webp       | 已支持   |
+| ico        | 已支持   |
+| svg        | 已支持   |
+| xls        | 前端支持，后端未支持                       |
+| xlsx       | 前端支持，后端未支持                       |
+| et         | 前端支持，后端未支持（未找到该格式的文件）   |
+| html       | 已支持                                     |
+| md         | 已支持                                     |
+| json       | 前端支持，后端未支持                       |
+| xml        | 前端支持，后端未支持                       |
+| txt        | 前端支持，后端未支持                       |
+| pdf        | 已支持                                     |
+| doc        | 已支持                                     |
+| docx       | 已支持                                     |
+| wps        | 已支持                                     |
+| ppt        | 已支持                                     |
+| pptx       | 已支持                                     |
 
-1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
-2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
-3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
-4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
-5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
-6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)